import React, { Component } from 'react'

export default class Demo extends Component {
    state = {
        hasError: ""
    }
    // build时才会有效，只能捕获后代组件生命周期时产生的错误
    // 不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
    static getDerivedStateFromError(error) {
        console.log(error);
        return { hasError: error }
    }

    componentDidCatch() {
        console.log("渲染组件出错！");
        console.log("统计错误，反馈给服务器，用于通知编码人员进行bug的解决");
    }

    render() {
        return (
            <div>
                <h2>Parent组件</h2>
                {this.state.hasError ? (<h2>当前网络不稳定，请稍后再试！</h2>) : <Child />}
            </div>
        )
    }
}

class Child extends Component {
    state = {
        list: "abc"
    }
    render() {
        return (
            <div>
                {this.state.List.map(item => {
                    return (
                        <h4>{item.name}</h4>
                    )
                })}
            </div>
        )
    }
}
